<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit"/>
    <title>根换头像</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>

<body>
    <div class="col-md-10	">
        <div class="panel panel-default">
            <div class="panel-body">
                <!--上传头像表单开始-->
                <form action="/admin/change_avatar" method="post" enctype="multipart/form-data" class="form-horizontal"
                      role="form" id="form-change-avatar">
                    <div class="form-group">
                        <label class="col-md-2 control-label">选择头像:</label>
                        <div class="col-md-1">
                            <img src="../images/index/user.jpg" class="img-responsive" id="img-avatar"/>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-offset-2 col-md-4">
                            <input type="file" name="file">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="button" class="btn btn-primary" value="上传" id="btn-change-avatar"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        let avatar = $.cookie("avatar");
        if (avatar!=null){
            $("#img-avatar").attr("src",avatar);
        }
    });
    $("#btn-change-avatar").click(function () {
        $.ajax({
            "url": "/admin/change_avatar",
            "data": new FormData($("#form-change-avatar")[0]),
            "contentType": false,
            "processData": false,
            "type": "post",
            "dataType": "json",
            "success": function (json) {
                if (json.state === 2000) {
                    alert("上传头像成功！");
                    console.log(json.data);
                    $("#img-avatar").attr("src",json.data);
                    $.cookie("avatar", json.data, { "expires":7 });
                } else {
                    alert("上传头像失败！" + json.message);
                }
            },
            "error": function () {
                alert("您的登录信息已过期！请重新登录");
                //location.href="login.html";
            }
        });
    });
</script>
</body>

</html>